<template>
    <p>组合式</p>
    <p>a:{{ a }}</p>
    <p>name: {{ name }}</p>


    <p>reactive===</p>
    <p>obj: {{ obj }}</p>
    <p>obj.name: {{ obj.name }}</p>
    <p>obj.age: {{ obj.age }}</p>

    <p>arr: {{ arr }}</p>
    <p>arr[0]: {{ arr[0] }} </p>

    <p>computed</p>
    <p>aAddfive : {{ aAddfive }}</p>
    <p>objAgeAddFive: {{ objAgeAddFive }}</p>

    <button @click="aAddOne">a+1</button>
    <button @click="aAddTwo">a+2</button>

    <SonDemo foo="hello world" :age="a" />

</template>

<script setup>
import { reactive, ref, computed,watch} from 'vue'
import SonDemo from './SonDemo.vue'

const a = ref(0)
const name = ref('tom')



console.log(a);
console.log(a.value);

const obj = reactive({
    name: 'tom',
    age: 12
})

const arr = reactive([1, 2, 3, 4])


//computed

const aAddfive = computed(() => {
    return a.value + 5
})
const objAgeAddFive = computed(() => {
    return obj.age + 5
})


function aAddOne(){
    a.value++
}


const aAddTwo = ()=>{
    a.value += 2
}

//watch
watch(a,(newVal,oldVal)=>{
    console.log('newVal',newVal);
    console.log('oldVal',oldVal);
})

</script>
